import {useState, useEffect} from 'react';

/**
 * 自定义 Hook：检测媒体查询状态
 * @param {string} query - CSS 媒体查询字符串（如 "(max-width: 768px)"）
 * @returns {boolean} - 是否命中媒体查询（true/false）
 */
export function useMediaQuery(query: string) {
    // 1. 初始化状态：默认是否命中查询
    const [isMatch, setIsMatch] = useState(() => {
        // 浏览器环境下检测初始状态，避免 SSR 报错
        if (typeof window !== 'undefined') {
            return window.matchMedia(query).matches;
        }
        return false; // 服务端渲染时默认不命中
    });

    // 2. 监听媒体查询状态变化
    useEffect(() => {
        const mediaQueryList = window.matchMedia(query);

        // 定义状态更新函数
        const handleChange = (e: { matches: boolean | ((prevState: boolean) => boolean); }) => {
            setIsMatch(e.matches);
        };

        // 绑定事件监听
        mediaQueryList.addEventListener('change', handleChange);

        // 清理副作用：组件卸载时移除监听
        return () => {
            mediaQueryList.removeEventListener('change', handleChange);
        };
    }, [query]); // 依赖项：query 变化时重新监听

    return isMatch;
}

